<template>
  <!-- 直播组件 -->
  <view style="background-color:white" v-if="liveList.length !== 0 || isFetch">
    <view class="spellpre__header" @tap.stop="handleClick">
      <text class="spellpre__header--title">{{decoretionProperties.title}}</text>
      <text class="spellpre__header--more" @tap.stop="goLiveList">查看更多 ></text>
    </view>
    <button open-type="contact" class="contact-style"
      v-if="decoretionProperties.type===0&&decoretionProperties.id===8"></button>
    <view>
      <view
        :class="'live-list ' + (decoretionProperties.listStyle == 1?'liveListBig':'') + ' ' + ( decoretionProperties.listStyle == 3?'liveListScroll':'' )"
        :style="'padding:0 ' + (decoretionProperties.pagePadding+'px')">
        <block v-for="(item, idx) in liveList" :key="idx">
          <view
            :class="'live-list-item ' + (decoretionProperties.listStyle == 1?'liveItemBig':'') + ' ' + ( decoretionProperties.listStyle == 3?'liveItemScroll':'')"
            :style="'margin:' + (decoretionProperties.goodsPadding+'px') + ' 0;' + (decoretionProperties.doodsAngle===1&& 'border-radius:8px;overflow:hidden')"
            v-if="idx<decoretionProperties.count">
            <image :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
              :src="item.shareImg"></image>
            <view class="live-item-head">
              <span class="head-live" v-if="item.status === 101">
                <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/live.png"></image>
                直播中
              </span>
              <span class="head-no-live" v-if="item.status === 102">未开始</span>
              <span v-if="item.status === 103" class="head-no-live head-done-live">已结束</span>
              <span v-if="item.status === 104" class="head-no-live head-done-live">禁播</span>
              <span v-if="item.status === 105" class="head-no-live head-done-live">暂停中</span>
              <span v-if="item.status === 106" class="head-no-live head-done-live">异常</span>
              <span v-if="item.status === 107" class="head-no-live head-done-live">已过期</span>
              <span class="head-text">{{item.viewCount || 0}}{{" "}}观看</span>
            </view>
            <view style="background:rgba(0,0,0, .05);height:130rpx;width:100%;bottom:0;position:absolute;">
              <view :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
                class="live-item-center">
                {{item.liveName}}
              </view>
              <view class="live-item-bottom">
                <view :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
                  class="live-anchor">
                  {{item.anchor}}
                </view>
                <view class="live-like">
                  <image class="like-gif" v-if="item.clickLike"
                    src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/dong_live.gif"></image>
                  <image :data-count="item.likeCount" :data-room_id="item.roomId" :data-id="item.id"
                    src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/like.png"></image>
                  {{item.likeCount || 0}}
                </view>
              </view>
            </view>
          </view>
        </block>
        <loading v-if="isFetch"></loading>
        <view class="no-live-data" v-if="liveList.length === 0 && !isFetch">暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script lang=ts>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import cloneDeep from "lodash/cloneDeep";
  import {
    view,
    getLiveList
  } from "@/api/modules/live";

  declare function requirePlugin(
    /** 需要引入的插件的 alias */
    module: string
  ): any
  const livePlayer = requirePlugin("live-player-plugin");

  @Component({})
  export default class HomeLive extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: any

    liveList: Array < any > = []
    current: number = 1
    total: number = 0
    isFetch: boolean = false
    loading: boolean = false
    formData: any = {}

    timer: number

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.fetchLiveList(1);
    }

    /**
     * 跳转直播间
     */
    goLiveList() {
      uni.navigateTo({
        url: "/subcontract/pages/live/live"
      });
    }

    /**
     * 跳转直播间
     */
    onGotoLive(e) {
      const roomId = e.currentTarget.dataset.room_id;
      const id = e.currentTarget.dataset.id;
      let viewCount = e.currentTarget.dataset.count;
      try {
        viewCount = parseInt(viewCount, 10) + 1;
      } catch (err) {
        viewCount = 1;
      }
      view({
        id,
        viewCount
      }).then(() => this.fetchLiveList());
      uni.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`,
      });
    }

    /**
     * 动态设置样式
     */
    onGetBorderStyle() {
      if (this.decoretionProperties.doodsAngle === 1) {
        return `'borderRadius':'8px', 'overflow':"hidden"`;
      } else {
        return "";
      }
    }

    /**
     * 获取直播列表
     */
    async fetchLiveList(current = 1, isMore = false) {
      this.isFetch = isMore ? false : true
      this.loading = isMore ? true : false
      const res = await getLiveList({
        current,
        size: 20,
      });
      const list = res.list.filter(item => item.firstFlag === 1);
      this.liveList = list
      this.current = res.current
      this.total = res.total
      this.isFetch = false
      this.loading = false
      setTimeout(() => {
        this.updateStatus();
        clearInterval(this.timer);
        this.timer = setInterval(() => this.updateStatus(), 1000 * 60);
      }, 100);
    }

    /**
     * 更新直播状态
     */
    async updateStatus() {
      const liveList = cloneDeep(this.liveList);
      const asyncArrs: any[] = liveList.map(v => {
        return livePlayer.getLiveStatus({
          room_id: v.roomId
        });
      });
      const arrRes = await Promise.all(asyncArrs);
      this.liveList = cloneDeep(
        liveList.map((v, i) => {
          v.status = arrRes[i].liveStatus;
          return v;
        }),
      )
    }

  }
</script>

<style lang="scss" scoped>
  @include b(spellpre) {
    box-sizing: border-box;
    background-color: #fff;

    @include e(header) {
      color: #333;
      height: 40px;
      line-height: 40px;
      background-color: #fff;

      @include m(title) {
        float: left;
        font-size: 18px;
        font-weight: 700;
        margin-left: 20px;
      }

      @include m(more) {
        font-size: 14px;
        font-weight: 400;
        float: right;
        margin-right: 20px;
      }
    }
  }

  @include b(contact-style) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }


  @include b(live-loading) {
    width: 100%;
    height: 100rpx;
  }

  @include b(live-tip) {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #b0b0b0;
    font-size: 24rpx;

    @include e(loadMore) {
      background-color: #ffffff;
      color: #333333;
    }
  }

  @include b(live-list) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;
  }

  @include b(liveListScroll) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  @include b(liveItemScroll) {
    flex-shrink: 0;
    margin-right: 10px !important;
  }

  @include b(live-list-item) {
    width: 49%;
    height: 380rpx;
    margin-bottom: 14rpx;
    position: relative;

    >image {
      width: 100%;
      height: 100%;
      background-color: #666;
      object-fit: cover;
    }
  }

  @include b(liveItemBig) {
    width: 100% !important;
  }

  @include b(live-item-head) {
    position: absolute;
    top: 8rpx;
    left: 16rpx;

    image {
      width: 90rpx;
      height: 30rpx;
      vertical-align: middle;
    }
  }

  @include b(live-item-bottom) {
    position: absolute;
    bottom: 16rpx;
    padding: 0 16rpx;
    display: flex;
    justify-content: space-between;
    line-height: 40rpx;
    font-size: 24rpx;
    width: 100%;
    height: 40rpx;
    color: #fff;

    image {
      width: 30rpx;
      height: 30rpx;
      vertical-align: middle;
    }
  }

  @include b(live-like) {
    position: relative;
  }

  @include b(like-gif) {
    width: 400rpx !important;
    height: 200rpx !important;
    position: absolute;
    bottom: 30rpx;
    right: -100rpx;
  }

  @include b(head-text) {
    display: inline-block;
    vertical-align: middle;
    line-height: 30rpx;
    font-size: 22rpx;
    padding: 0 12rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, .1);
  }

  @include b(live-item-center) {
    color: #fff;
    font-size: 24rpx;
    bottom: 90rpx;
    left: 16rpx;
    position: absolute;
  }

  @include b(head-live) {
    background-image: url(http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/dong.png);
    overflow: hidden;
    background-position: center;
    ;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #fff;
    padding: 0 12rpx;

    image {
      width: 24rpx;
      height: 22rpx;
      vertical-align: middle;
    }
  }

  @include b(head-no-live) {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #fff;
    padding: 0 12rpx;
    padding-left: 24rpx;
    background-color: rgba(0, 226, 100, 1);

    &::before {
      content: '';
      width: 8rpx;
      height: 8rpx;
      border-radius: 8rpx;
      display: block;
      position: absolute;
      left: 8rpx;
      top: 50%;
      margin-top: -4rpx;
      background-color: #fff;
    }
  }

  .head-done-live {
    background-color: #666;
  }

  @include b(no-live-data) {
    text-align: center;
    line-height: 400rpx;
    width: 100%;
  }
</style>